<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客房预订</title>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<style type="text/css">
    .myrow {
        display: flex;
        flex-direction: row;
        /*margin-left:1em;*/
    }

    .xxxx {
        height: 2px;
        background: #999999;
        margin-top: 16px;
        width: 2em;
        margin-left: 1em;
        margin-right: 1em;
    }
</style>
<body>
<div th:insert="user/navigate::nav"></div>
<div class="col-md-4" style="margin-left: 369px;">
    <form action="/roombook" method="post">
        <div class="form-group">
            <label >姓名</label>
            <input type="text" class="form-control"  placeholder="请输入姓名" name="username">
        </div>
        <div class="form-group">
            <label >身份证号</label>
            <input type="text" class="form-control"  placeholder="请输入身份证号" name="idCard">
        </div>
        <p>入住房间</p>
        <select class="form-control" name="room">
            <div  th:each="roomNum:${roomNums}">
                <option th:text="${roomNum}" th:value="${roomNum}">1</option>
            </div>
        </select>
        <div class="form-group ">
            <label>房间预定日期</label>
            <div class="myrow">
                <div class="form-group">
                    <label for="data1">入住日期</label>
                    <input type="date"   name="inTime" class="form-control" id="data1" placeholder="输入入住日期">
                </div>
                <div class="xxxx" style="margin-top: 40px;">

                </div>
                <div class="form-group">
                    <label for="data2">离开日期</label>
                    <input type="date" class="form-control"  name="outTime" id="data2" placeholder="输入入住日期">
                </div>
            </div>
        </div>
        <p>预交定金</p>
        <select class="form-control" name="deposit">
            <option value="100">100</option>
            <option value="200">200</option>
        </select>

        <button type="submit" class="btn btn-default">预定</button>
     </form>
</div>


</body>
</html>